import React, { PropTypes } from 'react';
import { Form, Input, Modal, InputNumber, Switch } from 'antd';
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const TransferFileModal = ({
  visible,
  item = {},
  onOk,
  onCancel,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    },
  }) => {
  function handleOk() {
    validateFields((errors) => {
      if (errors) {
        return;
      }
      //const data = { ...getFieldsValue(), key: item.key };
      const data = { ...getFieldsValue()};
      onOk(data);
    });
  }

  function checkNumber(rule, value, callback) {
    if (!/^[\d]{1,2}$/.test(value)) {
      callback(new Error('年龄不合法'));
    } else {
      callback();
    }
  }

  const modalOpts = {
    title: '编辑一键发布',
    visible,
    onOk: handleOk,
    onCancel,
  };

  return (
    <Modal {...modalOpts}>
      <Form horizontal>
        <FormItem
          label="类别："
          {...formItemLayout}
        >
          <p className="ant-form-text" id="type" name="type">{item.type}</p>
        </FormItem>
        <FormItem
          label="交易号："
          {...formItemLayout}
        >
          <p className="ant-form-text" id="type" name="type">{item.source_trade_id}</p>
        </FormItem>
        <FormItem
          label="初始数量："
          {...formItemLayout}
        >
          <p className="ant-form-text" id="init_count" name="init_count">{item.init_count}</p>
        </FormItem>
        <FormItem
          label="当前持有数量："
          hasFeedback
          {...formItemLayout}
        >
          {getFieldDecorator('item_count', {
            initialValue: item.item_count,
            rules: [
              { validator: checkNumber },
            ],
          })(
            <InputNumber min={0} max={item.init_count} />
          )}
        </FormItem>
        <FormItem
          label="状态："
          hasFeedback
          {...formItemLayout}
        >
          {getFieldDecorator('available_flag', {
            initialValue: item.available_flag,
          })(
            <Switch defaultChecked={item.available_flag} checkedChildren={'启用'} unCheckedChildren={'停用'} />
          )}
        </FormItem>
      </Form>
    </Modal>
  );
};

TransferFileModal.propTypes = {
  visible: PropTypes.any,
  form: PropTypes.object,
  item: PropTypes.object,
  onOk: PropTypes.func,
  onCancel: PropTypes.func,
};

export default Form.create()(TransferFileModal);
